<template>
  <div class="department-container">
    <div class="app-container">
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <!-- card title -->
        <div slot="header">
          <!-- 用一个行列布局 -->
          <el-row>
            <el-col :span="20">
              <span>{{ company.name }}</span>
            </el-col>
            <el-col :span="4">
              <el-row type="flex" justify="end">
                <!-- 两个内容 -->
                <el-col>{{ company.manager }}</el-col>
                <!-- 下拉菜单 element -->
                <el-col>
                  <el-dropdown>
                    <span> 操作<i class="el-icon-arrow-down" /> </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item @click.native="showAdd()">添加子部门</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
        <!-- card body -->
        <div>
          <el-tree :data="treeData" :props="defaultProps" default-expand-all @node-click="handleNodeClick">
            <template #default="{ data }">
              <el-row
                style="width: 100%;"
              >
                <el-col :span="20">
                  <span>{{ data.name }}</span>
                </el-col>
                <el-col :span="4">
                  <el-row type="flex" justify="end">
                    <!-- 两个内容 -->
                    <el-col>{{ data.manager }}</el-col>
                    <el-col>
                      <!-- 下拉菜单 element -->
                      <el-dropdown>
                        <span> 操作<i class="el-icon-arrow-down" /> </span>
                        <!-- 下拉菜单 -->
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item @click.native="showAdd(data)">添加子部门</el-dropdown-item>
                          <el-dropdown-item @click.native="editDept(data)">编辑部门</el-dropdown-item>
                          <el-dropdown-item @click.native="delNode(data)">删除部门</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </template>
          </el-tree>
        </div>
      </el-card>
    </div>
    <AddPart ref="editDept" :show-dialog="ShowDialog" :currentdata="currentData" :beforetransform="beforetransform" @close="closeDialog" @updateList="getData" />
  </div>
</template>

<script>
import { getDepartments, delDepartments } from '@/api/departments.js'
import { tranListToTreeData } from '@/utils/index.js'
import AddPart from './components/add-part.vue'
export default {
  // 注册
  components: {
    AddPart
  },
  data() {
    return {
      currentData: null,
      ShowDialog: false,
      treeData: [],
      beforetransform: [],
      company: { name: '', manager: '' },
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created () {
    this.getData()
  },
  methods: {
    handleNodeClick(ata) {
      console.log(ata)
    },
    async getData() {
      const data = await getDepartments()
      console.log(data.depts)
      this.beforetransform = data.depts
      this.company.name = data.companyName
      this.company.manager = data.companyManage
      this.treeData = tranListToTreeData(data.depts)
    },
    // 编辑节点
    editDept(data) {
      this.ShowDialog = true
      this.currentData = data
      this.$refs.editDept.getEditData(data.id)
    },
    // 删除节点操作
    delNode(data) {
    // 1.提示是否确认删除
      this.$confirm('确定要进行删除吗？', '温馨提示').then(async() => {
        if (data.children && data.children.length > 0) {
          return this.$message.error('不能直接删除父节点！')
        }
        await delDepartments(data.id)
        // 提示
        this.$message.success('删除成功！')
        this.getData()
      }).catch(error => {
        console.log(error)
      })
    },
    // 添加节点，显示弹层
    showAdd(data) {
      this.ShowDialog = true
      console.log(data)
      this.currentData = data
    },
    closeDialog() {
      this.ShowDialog = false
    }

  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tree-node__content {
  margin: 3px 0;
  font-size: 14px;
}
</style>
